<template>
    <div>
      <p style="color: #2A97F9;font-weight: 600; font-size: 16px;margin-left: 35px !important;">客户信息</p>

      <div style="display: flex;justify-content: space-between;margin-top: 20px">
        <el-button type="primary" size="small" @click="addField">添加自定义字段</el-button>
        <el-button size="small" @click="cancel" :disabled="defaultVal">恢复到默认</el-button>
      </div>


      <el-table
        :data="showData"
        style="width: 100%;margin-top: 10px">
        <el-table-column
          label="自定义公司客户档案字段类型、是否必填："
          prop="name">
          <template slot-scope="scope">
            <div v-show="scope.row.isSelf == 0">
              <span>{{scope.row.name}}</span>
            </div>
            <div v-show="scope.row.isSelf == 1">
              <el-input v-model="scope.row.name" v-if="scope.row.isEdit" style="width:200px" size="small" @blur="handlerBlur($event, scope.$index, scope.row)"   maxlength="20"
                        show-word-limit></el-input>
              <span v-if="!scope.row.isEdit">{{scope.row.name}}</span>
              <i class="icon-bianji operation_icon" @click="heandleChange(scope.$index, scope.row)" v-if="!scope.row.isEdit" style="cursor: pointer"></i>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="value">
          <template slot-scope="scope">
            <el-checkbox v-model="scope.row.isRequired" :disabled="scope.row.field == 'fullname' || scope.row.field == 'linker'  || scope.row.field == 'email'" @change="changeRequired">必填</el-checkbox>
          </template>
        </el-table-column>
      </el-table>

      <div style="border-bottom: 1px solid #DDDDDD">
        <div class="allLabel">
          <span style="padding-left: 13px">全部</span>
        </div>
        <div class="allLabel">
          <el-checkbox v-model="allRequired" style="padding-left: 13px" @change='toggle'>全选</el-checkbox>
        </div>
      </div>

      <div style="text-align: center;margin-top: 20px">
        <el-button type="primary" size="small" plain @click="submit">保 存</el-button>
        <el-button size="small" @click="init">取 消</el-button>
      </div>

    </div>
</template>

<script>
  import {getList, editRequired, cancelReauired} from '@/api/system/set'
    export default {
        name: "required",
        data() {
            return {
                tableData:[],
                showData:[],
                allRequired: true,
                defaultVal: true
            }
        },
        methods:{
            init() {
                this. defaultVal = true
                getList().then(res => {
                    res.data.data.forEach(value => {
                        if(value.isRequired == 0) {
                            value.isRequired = false
                            this.allRequired = false
                        } else {
                            value.isRequired = true
                        }

                        if(value.field != 'fullname' && value.field != 'linker' && value.field != 'email') {
                            if (value.isRequired != 0 || res.data.data.length != 25) {
                                this.defaultVal = false
                            }
                        }

                    })
                    this.tableData = res.data.data
                    this.showData = JSON.parse(JSON.stringify(this.tableData))
                })
            },
            submit() {
                this.showData.forEach(value => {
                    if(value.isRequired) {
                        value.isRequired = 1
                    } else {
                        value.isRequired = 0
                    }
                })
                let data = {
                    custRequiredList: this.showData
                }

                editRequired(data).then(res => {
                    this.$message({
                        type:'success',
                        message: res.data.msg
                    })
                    this.init()
                })
            },
            addField() {
                let number = 0
                this.showData.forEach(value => {
                    if(value.isSelf == 1) {
                        number += 1
                    }
                })
                if(number < 5) {
                    this.showData.push({
                        name:'自定义字段',
                        isRequired: false,
                        isSelf: 1
                    })
                    this.allRequired = false
                } else {
                    this.$message({
                        type:'warning',
                        message:'最多只允许添加5个自定义字段'
                    })
                }
            },
            changeRequired() {
                this.allRequired = true
                this.defaultVal = true
                this.showData.forEach(value => {
                    if(!value.isRequired) {
                        this.allRequired = false
                    }
                    if(value.field != 'fullname' && value.field != 'linker' && value.field != 'email') {
                        if (value.isRequired || this.showData.length != 25) {
                            this.defaultVal = false
                        }
                    }
                })
            },
            toggle(value) {
                if(value) {
                    this.showData.forEach(value => {
                        value.isRequired = true
                        if(value.field != 'fullname' && value.field != 'linker' && value.field != 'email') {
                            if (value.isRequired || this.showData.length != 25) {
                                this.defaultVal = false
                            }
                        }

                    })
                } else {
                    this.defaultVal = true
                    this.showData.forEach(value => {
                        value.isRequired = false
                        if(value.field === 'fullname') {
                            value.isRequired = true
                        }
                        if(value.field === 'linker') {
                            value.isRequired = true
                        }
                        if(value.field === 'email') {
                            value.isRequired = true
                        }

                        if(value.field != 'fullname' && value.field != 'linker' && value.field != 'email') {
                            if (value.isRequired || this.showData.length != 25) {
                                this.defaultVal = false
                            }
                        }

                    })
                }
            },
            heandleChange(index, item) {
                item.isEdit = true
                this.$set(this.showData, index, item)
            },
            handlerBlur(e, index, item) {
                item.isEdit = false
                this.$set(this.showData, index, item)
            },
            cancel() {
                cancelReauired().then(res => {
                    this.$message({
                        type:'success',
                        message: res.data.msg
                    })
                    this.init()
                })
            }
        }
    }
</script>

<style scoped>
.allLabel{
  line-height: 23px;
  padding: 12px 0;
  display: inline-block;
  width: 50%
}
</style>
